<template>
    <div>
        <div class="problem-desc">
            <div class="title">1+1</div>
            <div class="desc">
                <div class="title-content">
                    <v-md-preview :text="content"></v-md-preview>
                </div>
                <div class="title-info">
                    <div class="flex-jusc flex-jusc-c">
                        <span>难度：</span>
                        <span>难度</span>
                    </div>
                    <div class="flex-jusc">
                        <span>时/空限制：</span>
                        <span>难度</span>
                    </div>
                    <div class="flex-jusc flex-jusc-c">
                        <span>总通过数：</span>
                        <span>难度</span>
                    </div>
                    <div class="flex-jusc">
                        <span>总尝试数：</span>
                        <span>难度</span>
                    </div>
                    <div class="flex-jusc flex-jusc-c">
                        <span>来源：</span>
                        <span>难度</span>
                    </div>
                    <div>
                        <el-collapse v-model="collapseActive">
                            <el-collapse-item title="算法标签" name="1">
                                <div>与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；</div>
                                <div>在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。</div>
                            </el-collapse-item>
                        </el-collapse>
                    </div>
                </div>
            </div>
        </div>
        <CodeEditor v-bind:value="''"></CodeEditor>
    </div>
</template>

<script>
import md from '../.../../../../../../problem.md'
import CodeEditor from './code-editor'

export default {
    name: 'problem-desc',
    components: {
        CodeEditor,

    },
    data() {
        return {
            content: md,
            collapseActive: "1"
        }
    },
}
</script>

<style scoped>
.problem-desc {
    margin-bottom: 20px;
}

.title {
    font-size: 28px;
    font-family: "HarmonyOS_Sans_Regular";
    margin-bottom: 20px;
}

.desc {
    display: flex;
    justify-content: space-between;
}

.title-content {
    width: 75%;
}

.title-info {
    width: 24%;
    font-size: 15px;
}

::v-deep .title-info .el-collapse-item__header {
    font-size: 15px !important;
    padding: 0 8px 0 8px;
}

.flex-jusc {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid rgb(235, 238, 245);
    padding: 15px 8px 15px 8px;
}

.flex-jusc-c {
    background-color: rgb(249, 249, 249);
}

.flex-around {
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 15px 8px 15px 8px;
    border-top: 1px solid rgb(235, 238, 245);
}

.flex-around a {
    font-size: 15px;
}

.flex-around a i {
    margin-right: 10px;
}
</style>